<template>
  <div class="news-detail padding-15">

    <div class="news-content" v-html="detailData"></div>
    
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        detailData: {}
      }
    },
    activated() {
      this.detailData = {}
      this.getDetailData()
      setTimeout(_ => {
        this.$bridge.callHandler('navTitle', {title: '公文正文'})
      }, 200)
    },
    methods: {
      getDetailData(id) {
        let self = this
        self.$toast({
          duration: 0,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../assets/loading.gif'),
        })
        let config = {
          url: `${this.$common.basePath}down.php`,
          data: {
            appid: this.$route.query.appid
          },
          method: 'POST'
        }
        if(!self.newsFinished) {
          self.detailData = {}
          self.$axios(config).then(res => {
            self.detailData = res.data
            self.$nextTick(_ => {
              self.$toast.clear()
            })
          }).catch(err => {
            self.$nextTick(_ => {
              self.$toast.clear()
            })
          })
        }
      },
      /**
       * 预览附件
       * @return {[type]} [description]
       */
      previewFile(item) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item.address}`,
          fileName:  item.name
        })
        window.open(`${this.$common.filePath}${item.address}?filename=${item.name}`)
      },
    }
  }
</script>

<style lang="less">
  .news-content > * {
    max-width: calc(100vw - 30px)!important;
  }
  .news-content img {
    display: block;
    max-width: 100%!important;
    height: auto!important;
  }
  .news-content > table {
    border-collapse: collapse;
    border: 1px solid #e1e1e1;
  }
  .news-content > table td {
    border: 1px solid #e1e1e1;
  }
</style>
<style lang="less" scoped>
  
  h2 {
    font-size: 20px;
  }
  h3 {
    margin-bottom: 0;
    font-size: 17px;
  }
  .padding-15 {
    padding: 15px;
  }
  .news-title {
    margin: 0 0 15px 0;
  }
  .publisher-area {
    display: flex;
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
    color: #999;
    .padding-l-10 {
      padding-left: 10px;
    }
    & > span {
      height: 18px;
      line-height: 18px;
    }
  }
  .reference-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    padding: 15px 0;
    &:last-child {
      border-bottom: none;
    }
    .content {
      height: 80px;
      width: 100%;
      position: relative;
      .title {
        margin-top: 0;
        height: 42px;
        width: 100%;
        font-weight: 500;
        color: #333;
      }
      .sub-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100%);
        font-size: 14px;
        color: #999;
        .user-name {
          display: inline-block;
        }
        .read-num {
          margin-left: 15px;
        }
      }
    }
    .image {
      margin-left: 15px;
    }
  }
  .attachment-list {
    p {
      padding: 15px;
      margin-top: 0;
      background-color: #f5f5f5;
    }
  }
</style>